<template>
  <div class="book-list-container">
    <h1 style="font-size: 20px">书籍列表</h1>
    <div class="search-bar">
      <input v-model="searchQuery" placeholder="搜索书名、作者或出版社" />
      <button @click="performSearch">搜索</button>
      <button @click="clearSearch">清空搜索</button>
    </div>
    <table>
      <thead>
      <tr>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>出版日期</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-if="paginatedBooks.length === 0">
        <td colspan="5">没有找到匹配的书籍。</td>
      </tr>
      <tr v-for="book in paginatedBooks" :key="book.id">
        <td>{{ book.bookName }}</td>
        <td>{{ book.author }}</td>
        <td>{{ book.publishingHouse }}</td>
        <td>{{ book.publishDate }}</td>
        <td><el-button @click="viewDetails(book)"style="background-color: #409EFF; color: white;">详情</el-button></td>
      </tr>
      </tbody>
    </table>

    <!-- 分页部分 -->
    <div class="pagination" v-if="totalPages > 1">
      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="changePage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</button>

      <!-- 输入框和跳转按钮 -->
      <input type="number" v-model="pageInput" min="1" :max="totalPages" />
      <button @click="jumpToPage">跳转</button>
    </div>

    <!-- 书籍详情弹窗 -->
    <div v-if="isModalOpen" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h2>书籍详情</h2>
        <p><strong>书名:</strong> {{ selectedBook.bookName }}</p>
        <p><strong>书号:</strong> {{ selectedBook.id }}</p>
        <p><strong>作者:</strong> {{ selectedBook.author }}</p>
        <p><strong>出版社:</strong> {{ selectedBook.publishingHouse }}</p>
        <p><strong>出版日期:</strong> {{ selectedBook.publishDate }}</p>
        <p><strong>简要介绍:</strong> {{ selectedBook.briefIntroduction }}</p>
        <p><strong>作者介绍:</strong> {{ selectedBook.authorIntroduction }}</p>

        <div class="button-container">
          <el-button @click="copyToClipboard(selectedBook.bookName)"style="background-color: #409EFF; color: white;">复制书名</el-button>
          <el-button @click="copyToClipboard(selectedBook.id)"style="background-color: #409EFF; color: white;">复制书号</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      books: [],
      filteredBooks: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 30,
      pageInput: 1, // 新增页码输入
      isModalOpen: false,
      selectedBook: {}
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.filteredBooks.length / this.pageSize);
    },
    paginatedBooks() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredBooks.slice(start, start + this.pageSize);
    }
  },
  methods: {
    fetchBooks() {
      axios.get('http://localhost:8080/books/all')
          .then(response => {
            this.books = response.data;
            this.filteredBooks = this.books; // 初始化过滤后的书籍
          })
          .catch(error => {
            console.error('Error fetching books:', error);
          });
    },
    performSearch() {
      axios.get('http://localhost:8080/books/search', {
        params: {
          query: this.searchQuery
        }
      })
          .then(response => {
            this.filteredBooks = response.data; // 更新过滤后的书籍
            this.currentPage = 1; // 重置当前页为1
            this.pageInput = 1; // 重置输入页码
          })
          .catch(error => {
            console.error('Error searching books:', error);
          });
    },
    clearSearch() {
      this.searchQuery = ''; // 清空搜索框
      this.filteredBooks = this.books; // 重置为所有书籍
      this.currentPage = 1; // 重置当前页为1
      this.pageInput = 1; // 重置输入页码
    },
    changePage(page) {
      if (page > 0 && page <= this.totalPages) {
        this.currentPage = page;
        this.pageInput = page; // 更新输入框的页码
      }
    },
    jumpToPage() {
      const page = parseInt(this.pageInput);
      if (page > 0 && page <= this.totalPages) {
        this.changePage(page); // 调用现有的 changePage 方法
      } else {
        alert(`请输入有效的页码（1 到 ${this.totalPages}）`);
      }
    },
    viewDetails(book) {
      this.selectedBook = book;
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    copyToClipboard(text) {
      navigator.clipboard.writeText(text)
          .then(() => {
            alert('已复制: ' + text);
          })
          .catch(err => {
            console.error('复制失败:', err);
          });
    }
  },
  mounted() {
    this.fetchBooks(); // 初始加载所有书籍
  }
};
</script>

<style scoped>
.book-list-container {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  text-align: center; /* 居中对齐 */
}

.search-bar input {
  padding: 10px; /* 增加内边距 */
  font-size: 16px; /* 增加字体大小 */
  width: 250px; /* 设置宽度 */
  margin-right: 10px; /* 增加右侧间距 */
}

.search-bar button {
  padding: 10px 15px; /* 增加按钮的内边距 */
  font-size: 16px; /* 增加按钮的字体大小 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.pagination {
  margin-top: 20px;
  text-align: center; /* 居中对齐 */
  font-size: 16px; /* 增大字体大小 */
}

.pagination button {
  margin: 0 10px; /* 增加按钮之间的间隔 */
  padding: 10px 15px; /* 增加按钮的内边距 */
  font-size: 16px; /* 增加按钮的字体大小 */
}

.pagination input {
  width: 60px; /* 设置输入框的宽度 */
  padding: 5px; /* 增加内边距 */
  font-size: 16px; /* 增加输入框的字体大小 */
}

/* 弹窗样式 */
.modal {
  display: flex;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.button-container {
  display: flex;
  justify-content: center; /* 居中对齐 */
  margin-top: 20px; /* 可以根据需要调整顶部间距 */
}

.button-container el-button {
  margin: 0 15px; /* 按钮之间的间隔，左右各15px，总共30px */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  position: relative;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>